<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>css3 翻牌</title>
</head>

<body>
  <style>
    /* 
    transform-style: preserve-3d || flat;
    设置元素的子元素位于 3D空间 还是 平面中 
    */ */
    * {
      margin: 10px;
      padding: 0;
    }

    ul,
    li {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    /* .brandsShow {
      width: 1200px;
      height: 620px;
      margin: 0 auto;
    }

    .brandsShow ul {
      margin-left: -20px;
      width: 1225px;
      height: auto;
    }

    .brandsShow ul li {
      float: left;
      display: inline;
      width: 283px;
      height: 283px;
    } */

    .flip-container {
      perspective: 1000;
      -webkit-perspective: 1000px;
      /*父类容器中  perspective  子类允许透视*/
      -moz-perspective: 1000px;
      -ms-perspective: 1000px;
      -o-perspective: 1000px;
      perspective: 1000px;
      margin: 0px auto;
      float: left;
      margin-left: 20px;
      margin-bottom: 20px;
      border: 1px solid #fff;
    }

    .flip-container:hover .back {
      transform: rotateY(0deg);
      -webkit-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      z-index: 2;
    }

    .flip-container:hover .front {
      transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      z-index: 1
    }

    .flip-container,
    .front,
    .back {
      width: 283px;
      height: 283px;
    }

    .flipper {
      transition: transform 6s ease-out;
      transition: transform 5s ease-in-out;
      -webkit-transition: transform 5s ease-in-out;
      -moz-transition: transform 5s ease-in-out;
      -ms-transition: transform 5s ease-in-out;
      -o-transition: transform 5s ease-in-out;
      -webkit-transform-style: preserve-3d;
      /*使其子类变换后得以保留 3d转换后的位置*/
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      /* 元素在 3D 中（preserve-3d），还是平面中（flat） */
      transform-style: preserve-3d; 
      display: block;
      position: relative;
    }

    .front,
    .back {
      backface-visibility: hidden;
      transition: 6s ease-out;
      -webkit-transition: 6s ease-out;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
      position: absolute;
      top: 0;
      left: 0;
    }

    .front img,
    .back img {
      width: 283px;
      height: 283px;
      overflow: hidden;
    }

    .front {
      z-index: 2;
      transform: rotateY(0deg);
      transform: rotateY(0deg);
      -webkit-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
    }

    .back {
      z-index: 1;
      transform: rotateY(-180deg);
      transform: rotateY(-180deg);
      -webkit-transform: rotateY(-180deg);
      -moz-transform: rotateY(-180deg);
      -ms-transform: rotateY(-180deg);
      -o-transform: rotateY(-180deg);
    }
  </style>
  <ul>
    <li class="flip-container  " ontouchstart="this.classList.toggle('hover');">
      <a href="brandLi.html" class="flipper">
        <div class="front "><img src="images/01.jpg">前面</div>
        <div class="back "><img src="images/02.jpg">后面</div>
      </a>
    </li>
    <li class="flip-container  " ontouchstart="this.classList.toggle('hover');">
      <a href="brandLi.html" class="flipper">
        <div class="front "><img src="images/01.jpg"></div>
        <div class="back "><img src="images/02.jpg"></div>
      </a>
    </li>
  </ul>
</body>

</html>